<template>
  <div>
    <!--  分隔-->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div style="float: left; margin: 7px; font-weight: lighter;"><i class="el-icon-s-data"></i>基本信息</div>
          <div style="float: right; margin-top: 2px;margin-right: 50px">
            <el-button size="small" @click="back" icon="el-icon-back">返回</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--  查询条件-->
    <el-form :inline="true" :model="invoice" :rules="rules" ref="ruleForm" disabled
             label-width="150px" :label-position="'right'" style="text-align: left">
      <el-row type="flex" class="row-bg">
        <el-col :span="8">
          <el-form-item label="发票号" prop="invoiceId">
            <el-input v-model="invoice.invoiceId" placeholder="发票号" clearable></el-input>
          </el-form-item>
          <el-form-item label="发票抬头" prop="invoiceHeader">
            <el-input v-model="invoice.invoiceHeader" placeholder="抬头" clearable></el-input>
          </el-form-item>
          <el-form-item label="录入人员">
            <el-input v-model="invoice.createUser" placeholder="录入人员" readonly clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="委托客户" prop="client">
            <el-input v-model="invoice.client" placeholder="委托客户" suffix-icon="el-icon-search"
                      readonly></el-input>
          </el-form-item>
          <el-form-item label="税率%" prop="tax">
            <el-input v-model="invoice.tax" placeholder="税率" clearable></el-input>
          </el-form-item>
          <el-form-item label="录入时间">
            <el-input v-model="invoice.createTime" placeholder="录入时间" readonly clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="含税总额(元)" prop="total">
            <el-input v-model="invoice.total" placeholder="含税总额" clearable></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="taxId">
            <el-input v-model="invoice.taxId" placeholder="税号" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="clientPhone">
            <el-input v-model="invoice.clientPhone" placeholder="客户电话" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册地址" prop="clientAddr">
            <el-input v-model="invoice.clientAddr" placeholder="注册地址" clearable></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="invoice.bankName" placeholder="开户行" clearable></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input v-model="invoice.bankAccount" placeholder="银行账号" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--  分隔-->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div style="float: left; margin: 7px; font-weight: lighter;"><i class="el-icon-s-grid"></i>对账单</div>
        </div>
      </el-col>
    </el-row>
    <!--  订单表格-->
    <el-table :data="invoice.statements" show-summary :summary-method="getSummaries"
              :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
      <el-table-column
        type="index"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="statementId"
        label="对账单编号">
      </el-table-column>
      <el-table-column
        prop="client"
        label="委托客户">
      </el-table-column>
      <el-table-column
        prop="total"
        label="订单金额(元)">
      </el-table-column>
      <el-table-column
        prop="checkedMoney"
        label="已收金额(元)">
      </el-table-column>
      <el-table-column
        prop="checked"
        label="是否对账">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="录入时间">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "ShowInvoice",
  data() {
    return {
      //发票参数
      invoice: {
        total: 0,
        statements: [],
        invoiceId: '',
        invoiceHeader: '',
        client: '',
        tax: '',
        taxId: '',
        clientPhone: '',
        clientAddr: '',
        bankName: '',
        bankAccount: ''
      },
      rules: {}
    }
  },
  methods: {
    //返回上一界面
    back() {
      this.$router.back();
    },
    //表格自动计算规则
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        } else if (index != 3) {
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (column.property == 'total') {
                this.invoice.total = prev + curr;
              }
              return prev + curr;
            } else {
              if (column.property == 'total') {
                this.invoice.total = prev;
              }
              return prev;
            }
          }, 0);
        } else {
        }
      });
      return sums;
    }

  },
  created() {
    //将传过来的对象赋给参数
    this.invoice = this.$route.params
  }
}
</script>

<style scoped>

.bg-purple-light {
  background: rgb(237, 237, 237);
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-bottom: 15px;
}

/deep/ .el-table .el-table__body td .cell:empty::after,
.el-table .el-table__body td .cell > span:empty::after,
.el-table .el-table__body td .cell .approval:empty::after,
.el-table .el-table__body td .cell div:empty::after,
.el-table .el-table__body td .cell .line-limit-length:empty::after {
  content: "--";
}

</style>
<style>
.el-table .warning-row {
  background: oldlace !important;
}

.el-table__body tr.current-row > td {
  background-color: rgba(65, 225, 105, 0.45) !important;
}
</style>
